<template>
	<view class="reward-wrapper">
		<view class="conteainer-public-style" style="padding: 0 24rpx;">
			<view class="reward-list-wrapper">
				<view class="reward-item flex-c-s fz26 b-b-1" v-for="(r, i) of rewardList" :key="i">
					<view class="">
						<view class="rewrad-desc" style="margin-bottom: 10rpx;">
							{{ r.remark }}
						</view>
						<view class="reward-time fz24 color999">{{ r.created_at }}</view>
					</view>
					<view class="reawrd-money fz32 fw700 color-theme">￥ {{ r.reward_price }}</view>
				</view>
			</view>
			<NoData v-show="!rewardList.length" msg="暂无收益明细" />
		</view>
		
		<u-loadmore  v-show="rewardList.length" line :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { rewardList } from '@/http/my'
import { onShow, onReady } from '@dcloudio/uni-app' 

import NoData from '@/components/NoData.vue'
export default defineComponent({
	components: { NoData },
	setup() {
		const state = reactive({
			page: 1,
			pageSize: 50,
			total: 0, 
			rewardList: [] as Array<{
				created_at: string
				reward_price: number
				remark: string
			}>,
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '没有更多了'
		})
		const rewardFormData = reactive({
			page: 1,
			pageSize: 50, 
		})
		
		onReady(() => {
			queryRewardList()
		})
		const queryRewardList = async (): Promise<void> => { // 查询收益列表
			let res = await rewardList({
				...rewardFormData
			}) 
			console.log(res.data, '---');
			if(res.code === 0) {
				state.rewardList = res.data?.list || []
				state.total = res.data?.total || 0
				
				if(state.total == state.rewardList.length) {
					state.status = 'nomore'
				}
			} else {
				uni.showToast({
					title: res.msg || '查询失败',
					icon: 'none'
				})
			}
		}
		
		return {
			...toRefs(state)
		}
	}
})
</script>

<style lang="scss" scoped>
.reward-wrapper{
	.conteainer-public-style{
		margin-top: 24rpx;
	}
	.reward-list-wrapper{
		background-color: #fff;
		margin-top: 24rpx;
		.reward-item{
			padding: 20rpx 0;
		}
	}
}
</style>